<template>
	<view>
		<page-head :title="'首页 '" :headtype="1" :bg="`transparent`"></page-head>
		<view class="topblock">
			<image class="topbg" :src="apifun.serveimg+'hometopbg.png'" mode=""></image>
			<view class="banner marginAuto">
				<uv-swiper class="banner" height="150" :list="banner" keyName="image"></uv-swiper>
			</view>
			<view class="fun">
				<view class="funtitle">常用功能</view>
				<view class="funmain flex">
					<view class="funmaineach flex" @click="apifun.navigate('/pages/assessor/accountsq')">
						<view class="funmaineachimg">
							<image src="../../static/icon/asshome1.png" mode=""></image>
						</view>
						<view class="funmaineachtitle">账号审批</view>
					</view>
					<view class="funmaineach flex" @click="apifun.navigate('/pages/assessor/productsq')">
						<view class="funmaineachimg">
							<image src="../../static/icon/asshome2.png" mode=""></image>
						</view>
						<view class="funmaineachtitle">产品审批</view>
					</view>
				</view>
			</view>
		</view>
		<view class="remind">
			<view class="remindtitle marginAuto">待办提醒</view>
			<view class="remindeach flex marginAuto">
				<view class="reminmsg">
					<view class="reminmsgtitle">账号审批通知</view>
					<view class="reminmsgdec">您有{{ datas.account_count }}条审批处理</view>
				</view>
				<view class="remintime">
					<view class="remintimet">{{ datas.account_time || '1小时前' }}</view>
					<view class="remintimenum" v-if="datas.account_count > 0">{{ datas.account_count }}</view>
				</view>
			</view>
			<view class="remindeach flex marginAuto">
				<view class="reminmsg">
					<view class="reminmsgtitle">产品审批通知</view>
					<view class="reminmsgdec">您有{{ datas.goods_count }}条审批处理</view>
				</view>
				<view class="remintime">
					<view class="remintimet">{{ datas.goods_time || '1小时前' }}</view>
					<view class="remintimenum" v-if="datas.goods_count > 0">{{ datas.goods_count }}</view>
				</view>
			</view>
		</view>
		<view class="tabbar flex">
			<view class="tabeach">
				<view class="tabimg">
					<image src="@/static/tabbar/homeactive.png" mode=""></image>
				</view>
				<view class="tabname" style="color: #000;">首页</view>
			</view>
			<view class="tabeach" @click="navigatorr('/pages/assesstab/my')">
				<view class="tabimg">
					<image src="@/static/tabbar/my.png" mode=""></image>
				</view>
				<view class="tabname">我的</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				apifun:this.apifun,
				banner:[],
				datas:{},
			};
		},
		onLoad() {
			this.initData();
		},
		methods: {
			initData(){
				this.apifun.unirequest('/auditor/index/index','post',{},(res)=>{
					// console.log(res)
					if(res.code === 200){
						let datas = res.data;
						this.datas = datas;
						datas.banner_list.forEach((item,index)=>{
							this.banner.push({image:this.apifun.URLimg + item})
						})
						uni.setStorageSync('assessusermsg',datas.user_info);
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
			navigatorr(urls,params){
				this.apifun.navigate(urls)
			}
		}
	};
</script>

<style scoped lang="scss">
	page{
		background: #FAFAFA;
		padding-bottom: 50px;
	}
	.topbg{
		position: fixed;
		z-index: 0;
		top: 0;
		left: 0;
		width: 100%;
		height: 480rpx;
	}
	.banner{
		width:690rpx;
		height: 320rpx;
		margin-top: 20rpx;
	}
	// 功能
	.fun{
		position: relative;
		top: -20rpx;
		z-index: 10;
		width: 90%;
		padding: 0 5%;
		background: #FAFAFA;
		margin-top:30rpx;
		.funtitle{
			font-size:32rpx;
			color: #333333;
			font-weight: 600;
		}
		.funmain{
			margin-top: 20rpx;
			justify-content: space-between;
			.funmaineach{
				width:250rpx;
				padding:40rpx;
				border-radius: 20rpx;
				background: linear-gradient(to bottom,#F0F2FF,#FFFFFF);
				.funmaineachimg{
					width: 60rpx;
					height: 60rpx;
					image{
						width: 60rpx;
						height: 60rpx;
					}
				}
				.funmaineachtitle{
					font-size: 30rpx;
					color: #333333;
					line-height: 60rpx;
					margin-left: 20rpx;
					font-weight: 600;
				}
			}
		}
	}
	// 提醒
	.remindtitle{
		width: 690rpx;
		font-size: 32rpx;
		color: #333333;
		padding: 20rpx 0;
		font-weight: 600;
	}
	.remindeach{
		width: 610rpx;
		padding: 30rpx 40rpx;
		background: #fff;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		justify-content: space-between;
		.reminmsg{
			line-height: 50rpx;
			.reminmsgtitle{
				font-size: 30rpx;
				color:#333333;
				font-weight: 600;
			}
			.reminmsgdec{
				font-size:24rpx;
				color:#666666;
			}
		}
		.remintime{
			width: 120rpx;
			.remintimet{
				font-size:24rpx;
				color:#999999;
				line-height: 50rpx;
				text-align:center;
			}
			.remintimenum{
				display:block;
				width: 30rpx;
				height: 30rpx;
				line-height: 30rpx;
				font-size: 24rpx;
				text-align: center;
				background: #E51818;
				color: #fff;
				border-radius: 100rpx;
				margin:10rpx auto 0;
			}
		}
	}
	.tabbar{
		position: fixed;
		z-index: 999;
		width: 100%;
		bottom: 0;
		height: 50px;
		justify-content: space-around;
		background: #fff;
		.tabeach{
			width: 50px;
			height: 50px;
			.tabimg{
				width: 24px;
				height: 24px;
				margin:5px auto 0;
				image{
					width: 24px;
					height: 24px;
				}
			}
			.tabname{
				position: relative;
				font-size: 10px;
				color:#666666;
				line-height: normal;
				margin-top: 3px;
				text-align: center;
			}
		}
	}
</style>